.avatar-root {
	@apply rounded-full bg-pink-300;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	overflow: hidden;
	user-select: none;
}

.avatar-root.size-base {
	@apply w-9 h-9;
}

.avatar-root.size-xl {
	@apply w-12 h-12;
}

.avatar-root.size-lg {
	@apply w-8 h-8;
}

.avatar-root.size-md {
	@apply w-6 h-6;
}

.avatar-root.size-sm {
	@apply w-4 h-4;
}

.avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.avatar-fallback {
	@apply bg-indigo-400 text-gray-100;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: 500;

  &.avatar-none {
    @apply bg-gray-600;
  }
}

.avatar-root.size-base .avatar-fallback {
	@apply text-sm;
}

.avatar-root.size-lg .avatar-fallback {
	@apply text-base;
}

.avatar-root.size-md .avatar-fallback {
	@apply text-[10px];
}

.avatar-root.size-sm .avatar-fallback {
	font-size: 0.5rem;
}
